<template>
  <el-row :gutter="24" style="margin-left: 10px">
    <el-tabs class="table-form-detail" type="border-card">
      <el-tab-pane label="设备台账字段">
        <ListColumn />
      </el-tab-pane>
      <el-tab-pane label="设备分类"><Category /></el-tab-pane>
      <el-tab-pane label="故障配置"><Troubled /></el-tab-pane>
      <el-tab-pane label="维修配置"><Repaired /></el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
import ListColumn from './businesssetting/listcolumn'
import Category from './businesssetting/category'
import Repaired from './businesssetting/repaired'
import Troubled from './businesssetting/troubled'
import data from "./const";
import { fetchRoleList } from "@/api/system";
export default {
  components: {ListColumn , Category ,Repaired,Troubled},
  data() {
    return {
      tableKey:1,
      data,
      menu1: true,
      input1: "",
      input2: "",
      input3: "",
      total: "",
      listLoading: "",
      list: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "权限组1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "权限组2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    getRoleList() {
      fetchRoleList().then((response) => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
        // Just to simulate the time of the request
      });
    },
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "新增权限组",
        name: newTabName,
        content: "新增权限组",
      });
      this.editableTabsValue = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>
<style>
.el-tabs--left .el-tabs__header.is-left {
  margin-top: 60px;
}
.search-user{
  margin:20px 0;
}
</style>